<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            .box-danmu{
                position: relative;
            }
            .box-danmu .text{
                position: absolute;
                pointer-events:none;
                display: inline-block;
                padding: 0 0.2rem;
                background-color: red;
                /*background: rgba(203, 161, 101, .1);*/
                height: .54rem;
                line-height: .54rem;
                font-size: .24rem;
                border-radius:5px;
            }
            .box-danmu .text.text-ad{
              pointer-events:auto;
              width: 50%;
              padding: 0;
            }
            .box-danmu .text-ad:after{
              position: absolute;
              content:'1';
              width: .24rem;
              height: .24rem;
              top:-.12rem;
              right: 0;
              border-radius:.12rem;
              line-height: .24rem;
              text-align: center;
              background-color: #ff3b30;
              font-size: .2rem;
              color:#fff;
            }
            .box-danmu .text-con{
                width: 100%;
                height: 100%;
                border-radius: 5px;
                overflow: hidden;
                position: absolute;
            }
            .box-danmu .text-mark{
                position: absolute;
                bottom: -.1rem;
                right: .1rem;
                font-size: .2rem;
                color: #fff;
            }
            .box-danmu .text small {
                font-size: .24rem;
                color: #e9343b;
            }
            .box-danmu{
                width: 6.8rem;
                height: 4rem;
                margin: 0 auto;
                background-color: pink;
            }
            h1{
                font-size: .3rem;
            }
        </style>
    </head>
    <body>
        <h1>广告测试</h1>
        <button id="start">开始动画</button>
        <div class="box-danmu" id="box">
            <span class="text text-ad" style="top:6px;left:100%;transition:all 6s linear;transition-delay:1s;">
                <span class="text-con">
                    <script type="text/javascript" smua="d=m&s=b&u=u3204042&h=30" src="//www.smucdn.com/smu0/o.js"></script>
                    <span class="text-mark">广告</span>
                </span>
            </span>
            <!-- 域名dftoutiao.com -->
            <span class="text" style="top:40px;">
                <!-- 域名dftoutiao.com -->
                <script type="text/javascript" smua="d=m&s=b&u=u3204042&h=30" src="//www.smucdn.com/smu0/o.js"></script>
            </span>
            <!-- <script type="text/javascript" smua="d=m&s=b&u=u3204147&h=30" src="//www.smucdn.com/smu0/o.js"></script> -->
            <!-- 域名eastday.com -->
            <!-- <script type="text/javascript" smua="d=m&s=b&u=u3189833&h=30" src="//www.smucdn.com/smu0/o.js"></script> -->
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

        <script>
            $(function(){
                $('#box').append('\
                    <span id="info" class="text text-ad" style="top:6px;left:100%;transition:all 6s linear;transition-delay:1s;">\
                        1234\
                    </span>');
                // 直接在css里面写动画是不会有效果的。例如将这些top:6px;left:100%;transition:all 6s linear;transition-delay:1s;transform:translate3d(-100%,0,0)样式写在元素上，只能看到最终结果，看不到动画
                $("#start").click(function(){
                    $("#info").css('transform','translate3d(-100%,0,0)');
                })
                // <span class="text-con">\
                //     <script type="text/javascript" smua="d=m&s=b&u=u3204042&h=30" src="http://www.smucdn.com/smu0/o.js"><\/script>\
                //     <span class="text-mark">广告</span>\
                // </span>\
            })
        </script>
    </body>
</html>